<template>
		<el-container class="chat-box" v-loading="isload"  element-loading-text="加载聊天内容中...">
			<div v-if="!chatStore && !isload" class="error-message">
				<el-alert
					title="无法加载聊天内容"
					type="error"
					description="无法找到匹配的聊天记录，请关闭窗口并重试。"
					show-icon
					:closable="false">
				</el-alert>
				<pre class="debug-info">{{ debugInfo }}</pre>
			</div>
			<chat-box v-else-if="chatStore" :chat="chatStore" :flag="true" :myheight="myheight"></chat-box>
			
			<!-- 调试面板 -->
			<div v-if="showDebug" class="debug-panel">
				<h3>调试信息</h3>
				<button @click="showDebug = false">关闭</button>
				<pre>{{ debugInfo }}</pre>
			</div>
		</el-container>
</template>

<script>
	import ChatBox from "../components/chat/ChatBox.vue";
	import { ipcApiRoute } from '@/api';
	import { ipc } from '@/utils/ipcRenderer';
	
	export default {
		name: "chat",
		components: {
			ChatBox
		},
		data() {
			return {
				myheight: "140px",
				isload: true,
				debugInfo: '',
				showDebug: true,
				localChatData: null // 添加本地缓存聊天数据
			}
		},
		created(){
			console.log('test.vue组件创建完成');
			console.log('当前路由:', this.$route);
			
			// 检查是否在Electron环境中
			const isElectron = window.electron || (window.require && window.require('electron'));
			
			// 初始化IPC引用
			if (isElectron) {
				// 添加ipc引用确保可用
				this.$ipc = ipc;
			}
			
			// 首先检查window.api中是否有传递的数据
			if (window.api && window.api.data) {
				console.log('从window.api接收到数据:', window.api.data);
				this.localChatData = window.api.data;
				this.debugInfo = JSON.stringify({
					source: 'window.api.data',
					data: window.api.data,
					windowId: window.api.windowId || window.api.id || '未知'
				}, null, 2);
			} else {
				// 否则尝试从URL参数获取数据
				this.debugInfo = JSON.stringify({
					route: this.$route.path,
					query: this.$route.query,
					params: this.$route.params,
					store: this.$store ? '存在' : '不存在',
					chatStore: this.$store && this.$store.state.chatStore ? '存在' : '不存在',
					chats: this.$store && this.$store.state.chatStore ? 
						this.$store.state.chatStore.chats.length : 0
				}, null, 2);
				
				// 解析URL参数
				let data = null;
				try {
					// 优先检查路由参数data
					if (this.$route.params && this.$route.params.data) {
						const paramsData = this.$route.params.data;
						console.log('路由参数原始值:', paramsData);
						data = JSON.parse(decodeURIComponent(paramsData));
						console.log('解码路由参数后:', data);
						this.debugInfo += '\n\n从路由参数解析数据: ' + JSON.stringify(data);
					} else if (this.$route.query.data) {
						// 从查询参数获取数据
						const decodedData = decodeURIComponent(this.$route.query.data);
						console.log('URL查询参数原始值:', this.$route.query.data);
						console.log('解码后:', decodedData);
						data = JSON.parse(decodedData);
						console.log('从query获取数据:', data);
					} else if (this.$route.query.chatId) {
						// 从普通URL参数获取聊天ID
						const chatId = this.$route.query.chatId;
						const name = this.$route.query.name || '聊天窗口';
						console.log('从URL参数中获取聊天ID:', chatId);
						data = {
							index: chatId,
							name: name
						};
					}
				} catch (e) {
					console.error('解析URL参数出错:', e);
					this.debugInfo += '\n\n解析URL参数错误: ' + e.message;
				}
				
				// 如果解析成功，保存数据
				if (data && data.index) {
					this.localChatData = data;
					console.log('已保存本地聊天参数:', this.localChatData);
					this.debugInfo += '\n\n本地参数: ' + JSON.stringify(this.localChatData);
				}
			}
			
			// 创建模拟数据（如果需要）
			if (this.localChatData && this.localChatData.index && !this.localChatData.messages) {
				console.log('创建基本对象结构');
				this.localChatData = {
					targetId: this.localChatData.index,
					showName: this.localChatData.name || '聊天',
					messages: [],
					timestamp: new Date().getTime()
				};
			}
			
			// 添加键盘快捷键切换调试面板
			document.addEventListener('keydown', this.toggleDebug);
			
			// 根据环境不同监听消息
			if (isElectron) {
				// Electron环境 - 使用IPC通信
				console.log('在Electron环境中设置IPC监听器');
				
				// 监听窗口间通信消息
				this.$ipc.removeAllListeners(ipcApiRoute.os.window1ToWindow2);
				this.$ipc.on(ipcApiRoute.os.window1ToWindow2, (event, arg) => {
					try {
						console.log('收到主窗口消息:', arg);
						this.debugInfo += '\n\n收到主窗口消息: ' + JSON.stringify(arg);
						
						// 处理同步聊天数据
						if (arg && arg.type === 'sync-chat-data' && arg.chatData) {
							console.log('收到聊天数据同步:', arg.chatData);
							this.localChatData = arg.chatData;
							this.debugInfo += '\n\n收到聊天数据: ' + JSON.stringify(arg.chatData);
							// 关闭加载状态
							this.isload = false;
							// 强制组件更新
							this.$forceUpdate();
						}
					} catch (error) {
						console.error('处理接收到的消息时出错:', error);
						this.debugInfo += '\n\n处理消息错误: ' + error.message;
					}
				});
			} else {
				// 浏览器环境 - 使用postMessage通信
				console.log('在浏览器环境中设置postMessage监听器');
				
				// 添加消息事件监听
				window.addEventListener('message', this.handleBrowserMessage);
				
				// 通知主窗口准备好接收数据
				if (window.opener) {
					console.log('向父窗口发送准备就绪消息');
					window.opener.postMessage({
						type: 'request-chat-data',
						chatId: this.chatId
					}, '*');
				}
			}
			
			// 延迟请求聊天数据
			setTimeout(() => {
				if (this.chatId && (!this.localChatData.messages || this.localChatData.messages.length === 0)) {
					console.log('延迟请求聊天数据:', this.chatId);
					this.requestChatData();
				} else {
					// 有完整数据，关闭加载状态
					this.isload = false;
				}
				
				// 如果5秒内没有收到完整数据，使用模拟数据
				setTimeout(() => {
					if (this.isload) {
						console.log('等待超时，使用模拟数据');
						this.localChatData = this.createMockChatData();
						this.debugInfo += '\n\n等待超时，使用模拟数据';
						this.isload = false;
						this.$forceUpdate();
					}
				}, 5000);
			}, 500);
		},
		beforeDestroy() {
			// 移除键盘监听
			document.removeEventListener('keydown', this.toggleDebug);
			
			// 检查是否在Electron环境中
			const isElectron = window.electron || (window.require && window.require('electron'));
			
			if (isElectron) {
				// Electron环境 - 使用IPC通信
				// 移除IPC监听器
				this.$ipc.removeAllListeners(ipcApiRoute.os.window1ToWindow2);
				
				// 通知主窗口此窗口已关闭
				if (this.chatId) {
					this.$ipc.invoke(ipcApiRoute.os.window2ToWindow1, {
						receiver: 'main',
						content: {
							type: 'window-closed',
							chatId: this.chatId
						}
					}).catch(err => {
						console.error('发送窗口关闭通知失败:', err);
					});
				}
			} else {
				// 浏览器环境 - 使用postMessage通信
				// 移除消息事件监听器
				window.removeEventListener('message', this.handleBrowserMessage);
				
				// 通知主窗口此窗口已关闭
				if (this.chatId && window.opener) {
					try {
						window.opener.postMessage({
							type: 'window-closed',
							index: this.chatId
						}, '*');
						console.log('已通知父窗口关闭事件');
					} catch (error) {
						console.error('通知父窗口关闭事件失败:', error);
					}
				}
			}
		},
		methods: {
			// 请求聊天数据
			requestChatData() {
				if (!this.chatId) {
					console.error('无法请求聊天数据: chatId为空');
					this.debugInfo += '\n\n无法请求数据: chatId为空';
					return;
				}
				
				console.log('请求聊天数据:', this.chatId);
				this.debugInfo += '\n\n请求聊天数据: ' + this.chatId;
				
				// 检查是否在Electron环境中
				const isElectron = window.electron || (window.require && window.require('electron'));
				
				if (isElectron) {
					// Electron环境 - 使用IPC通信
					// 获取窗口ID
					let windowId = '';
					if (window.api && window.api.windowId) {
						windowId = window.api.windowId;
					} else if (window.api && window.api.id) {
						windowId = window.api.id;
					} else {
						// 尝试从URL获取窗口名
						windowId = `chat-window-${this.chatId}`;
					}
					
					// 记录窗口ID
					this.debugInfo += '\n\n窗口ID: ' + windowId;
					
					// 使用window2ToWindow1方法向主窗口请求数据
					this.$ipc.invoke(ipcApiRoute.os.window2ToWindow1, {
						receiver: 'main',
						content: {
							type: 'request-chat-data',
							chatId: this.chatId,
							windowId: windowId
						}
					}).then(result => {
						console.log('请求聊天数据发送成功:', result);
						this.debugInfo += '\n\n请求发送成功: ' + JSON.stringify(result);
					}).catch(err => {
						console.error('请求聊天数据失败:', err);
						this.debugInfo += '\n\n请求失败: ' + err.message;
						
						// 请求失败时使用模拟数据
						console.log('请求失败，使用模拟数据');
						setTimeout(() => {
							if (this.isload) {
								this.localChatData = this.createMockChatData();
								this.isload = false;
								this.$forceUpdate();
							}
						}, 1000);
					});
				} else {
					// 浏览器环境 - 使用postMessage通信
					console.log('浏览器环境：使用postMessage请求数据');
					this.debugInfo += '\n\n浏览器环境：使用postMessage请求数据';
					
					if (window.opener) {
						try {
							// 向父窗口发送请求
							window.opener.postMessage({
								type: 'request-chat-data',
								chatId: this.chatId
							}, '*');
							
							console.log('通过postMessage请求数据已发送');
							this.debugInfo += '\n\n通过postMessage请求数据已发送';
							
							// 设置一个超时处理，如果一段时间内没有收到响应，使用模拟数据
							setTimeout(() => {
								if (this.isload) {
									console.log('postMessage请求超时，使用模拟数据');
									this.debugInfo += '\n\npostMessage请求超时，使用模拟数据';
									this.localChatData = this.createMockChatData();
									this.isload = false;
									this.$forceUpdate();
								}
							}, 3000);
						} catch (error) {
							console.error('发送postMessage请求失败:', error);
							this.debugInfo += '\n\n发送postMessage请求失败: ' + error.message;
							
							// 出错时使用模拟数据
							setTimeout(() => {
								if (this.isload) {
									this.localChatData = this.createMockChatData();
									this.isload = false;
									this.$forceUpdate();
								}
							}, 1000);
						}
					} else {
						console.error('无法获取父窗口引用，无法发送消息');
						this.debugInfo += '\n\n无法获取父窗口引用，无法发送消息';
						
						// 无法通信时使用模拟数据
						setTimeout(() => {
							if (this.isload) {
								this.localChatData = this.createMockChatData();
								this.isload = false;
								this.$forceUpdate();
							}
						}, 1000);
					}
				}
			},
			
			// 切换调试面板
			toggleDebug(e) {
				if (e.ctrlKey && e.shiftKey && e.key === 'D') {
					this.showDebug = !this.showDebug;
				}
			},
			
			// 手动初始化Store
			initStoreData() {
				// 如果已有本地聊天数据，尝试手动添加到Store
				if (this.localChatData && this.$store && this.$store.state.chatStore) {
					console.log('尝试手动初始化Store数据');
					this.debugInfo += '\n\n尝试手动初始化Store';
					
					// 检查聊天是否已存在
					const existingChat = this.$store.state.chatStore.chats.find(
						c => c.targetId == this.localChatData.index
					);
					
					if (!existingChat) {
						// 创建一个简单的聊天对象
						const simpleChat = {
							targetId: this.localChatData.index,
							showName: this.localChatData.name,
							messages: [],
							timestamp: new Date().getTime()
						};
						
						// 添加到Store
						this.$store.commit('addChat', simpleChat);
						console.log('已手动添加聊天到Store:', simpleChat);
						this.debugInfo += '\n\n已手动添加聊天: ' + JSON.stringify(simpleChat);
					}
				}
			},
			
			// 创建模拟聊天数据，以防无法从主窗口获取
			createMockChatData() {
				if (!this.chatId) return null;
				
				// 从URL参数获取名称
				let name = '聊天';
				try {
					if (this.$route.query.data) {
						const data = JSON.parse(decodeURIComponent(this.$route.query.data));
						if (data && data.name) {
							name = data.name;
						}
					}
				} catch (e) {
					console.error('解析名称时出错:', e);
				}
				
				// 创建一个模拟聊天对象
				return {
					targetId: this.chatId,
					showName: name,
					messages: [
						{
							id: 1,
							content: '这是一条模拟消息',
							sendTime: new Date().toISOString(),
							isMe: false
						},
						{
							id: 2,
							content: '无法从主窗口获取真实聊天数据，正在显示模拟数据',
							sendTime: new Date().toISOString(),
							isMe: true
						}
					],
					avatar: '',
					isMock: true // 标记为模拟数据
				};
			},
			// 处理浏览器环境下的消息
			handleBrowserMessage(event) {
				// 验证消息来源安全性
				if (event.origin === window.location.origin) {
					try {
						const arg = event.data;
						console.log('收到主窗口postMessage消息:', arg);
						this.debugInfo += '\n\n收到主窗口postMessage消息: ' + JSON.stringify(arg);
						
						// 处理同步聊天数据
						if (arg && arg.type === 'sync-chat-data' && arg.chatData) {
							console.log('收到聊天数据同步:', arg.chatData);
							this.localChatData = arg.chatData;
							this.debugInfo += '\n\n收到聊天数据: ' + JSON.stringify(arg.chatData);
							// 关闭加载状态
							this.isload = false;
							// 强制组件更新
							this.$forceUpdate();
						}
					} catch (error) {
						console.error('处理postMessage消息时出错:', error);
						this.debugInfo += '\n\n处理消息错误: ' + error.message;
					}
				} else {
					console.warn('忽略来自不同源的消息:', event.origin);
				}
			},
		},
		computed: {
			chatStore() {
				try {
					// 首先尝试使用本地聊天数据
					if (this.localChatData) {
						console.log('使用本地聊天数据');
						return this.localChatData;
					}
					
					// 然后尝试从URL参数获取
					let data;
					if (this.$route.params.data) {
						data = JSON.parse(this.$route.params.data);
						console.log('从params获取数据:', data);
					} else if (this.$route.query.data) {
						const decodedData = decodeURIComponent(this.$route.query.data);
						console.log('URL参数原始值:', this.$route.query.data);
						console.log('解码后:', decodedData);
						data = JSON.parse(decodedData);
						console.log('从query获取数据:', data);
					} else {
						console.error('无法获取聊天数据参数');
						this.debugInfo += '\n\n无法获取聊天参数';
						return this.createMockChatData(); // 使用模拟数据
					}
					
					if (!data || !data.index) {
						console.error('聊天参数无效:', data);
						this.debugInfo += '\n\n聊天参数无效';
						return this.createMockChatData(); // 使用模拟数据
					}
					
					// 最后尝试从Store获取
					if (this.$store && this.$store.state.chatStore && this.$store.state.chatStore.chats) {
						let chats = this.$store.state.chatStore.chats;
						if (!chats || !chats.length) {
							console.error('聊天列表为空');
							this.debugInfo += '\n\n聊天列表为空, chatStore: null';
							return this.createMockChatData(); // 使用模拟数据
						}
						
						// 寻找匹配的聊天
						const chat = chats.find(c => String(c.targetId) === String(data.index));
						if (chat) {
							console.log('在Store中找到匹配的聊天:', chat);
							return chat;
						}
						
						console.error('在Store中未找到匹配的聊天');
						this.debugInfo += '\n\n未找到匹配的聊天';
						return this.createMockChatData(); // 使用模拟数据
					} else {
						console.error('Store不存在或未初始化');
						this.debugInfo += '\n\n存储未初始化';
						return this.createMockChatData(); // 使用模拟数据
					}
				} catch (error) {
					console.error('获取聊天数据时出错:', error);
					this.debugInfo += '\n\n获取聊天数据出错: ' + error.message;
					return this.createMockChatData(); // 使用模拟数据
				}
			},
			chatId() {
				// 从localChatData中获取
				if (this.localChatData && this.localChatData.index) {
					return this.localChatData.index;
				}
				
				// 从路由params中获取
				try {
					if (this.$route.params && this.$route.params.data) {
						const data = JSON.parse(decodeURIComponent(this.$route.params.data));
						if (data && data.index) {
							return data.index;
						}
					}
				} catch (e) {
					console.error('解析路由参数出错:', e);
				}
				
				// 从查询参数中获取
				try {
					if (this.$route.query.data) {
						const data = JSON.parse(decodeURIComponent(this.$route.query.data));
						if (data && data.index) {
							return data.index;
						}
					}
				} catch (e) {
					console.error('解析查询参数出错:', e);
				}
				
				return null;
			}
		},
		watch: {
			// 监控聊天ID变化
			chatId: {
				immediate: true,
				handler(newVal) {
					if (newVal) {
						console.log('聊天ID已更新:', newVal);
						// 可以在这里触发请求聊天数据
					}
				}
			}
		},
		mounted() {
			// 组件挂载后，如果没有找到聊天数据，尝试手动初始化
			if (!this.chatStore && this.localChatData) {
				console.log('组件挂载后尝试初始化数据');
				this.initStoreData();
			}
		}
	}
</script>

<style lang="scss">
	.chat-box {
		width: 100%;
		height: 100%;
		
		.error-message {
			width: 100%;
			padding: 20px;
			
			.debug-info {
				margin-top: 20px;
				padding: 10px;
				background: #f8f8f8;
				border: 1px solid #ddd;
				border-radius: 4px;
				font-family: monospace;
				white-space: pre-wrap;
				font-size: 12px;
				max-height: 300px;
				overflow: auto;
			}
		}
		
		.debug-panel {
			position: fixed;
			top: 10px;
			right: 10px;
			background: rgba(0, 0, 0, 0.8);
			color: #fff;
			padding: 10px;
			border-radius: 4px;
			z-index: 9999;
			max-width: 80%;
			max-height: 80vh;
			overflow: auto;
			
			h3 {
				margin-top: 0;
				color: #fff;
				font-size: 16px;
			}
			
			pre {
				white-space: pre-wrap;
				font-family: monospace;
				font-size: 12px;
			}
			
			button {
				background: #f44336;
				color: white;
				border: none;
				padding: 5px 10px;
				border-radius: 3px;
				cursor: pointer;
				margin-bottom: 10px;
			}
		}
	}
	
	.chat-page {
		.chat-list-box {
			display: flex;
			flex-direction: column;
			border: #dddddd solid 1px;
			background: white;
			width: 3rem;

			.chat-list-header {
				padding: 3px 8px;
				line-height: 50px;
				border-bottom: 1px #ddd solid;
				
				.el-input__inner {
					border-radius: 10px !important;
					background-color: #F8F8F8;
				}
				
			}
			
			.chat-list-loadding{
				height: 50px;
				background-color: #eee;
				
				.chat-loading-box{
					height: 100%;
				}
			}
			
			.chat-list-items {
				flex: 1;
				background: #F8F8F8;
				margin: 0 3px;
			}
		}
	}
</style>